<template>
  <div class="wordcloud-container">
    <div :id="id" class="wordcloud-container"></div>
    <el-empty :image-size="100" v-if="data.length === 0"></el-empty>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default {
  name: 'WorldCloud',
  components: {},
  props: {
    id: {
      type: String,
      default: 'wordcloud',
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    data: {
      handler(val) {
        this.setChartData()
      },
      deep: true,
    },
  },
  mounted() {
    this.initEchart()
    this.setChartData()
  },
  methods: {
    initEchart() {
      this.chart = echarts.init(document.getElementById(this.id))
    },
    setChartData() {
      const option = {
        series: [
          {
            type: 'wordCloud',
            data: this.data,
            // rotationRange: [0, 0],
            sizeRange: [10, 30],
            textStyle: {
              normal: {
                color: '#333',
              },
            },
            drawOutOfBound: true,
          },
        ],
      }
      this.chart.setOption(option)
    },
  },
}
</script>

<style scoped lang="scss">
.wordcloud-container {
  width: 100%;
  height: 150px;
}
.el-empty {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>
